<template>
	<div class="datas" v-loading.fullscreen.lock="loading">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="color: #FEC418;">地区排行榜</span>
				<div style="float: right; color: lightgray;">更新时间：{{ nowTime }}</div>
			</div>
			<div class="card-content">
				<div class="top">
					<div class="top-title">
						<el-radio-group v-model="mselect" fill="#FEC418" style="vertical-align: middle;margin-right: 20px;">
							<el-radio-button label="日榜"></el-radio-button>
							<el-radio-button label="周榜"></el-radio-button>
							<el-radio-button label="月榜"></el-radio-button>
						</el-radio-group>
						<el-select v-model="value" placeholder="请选择" style="vertical-align: middle;">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
						<div style="float: right;">
							<el-button @click="searchData" style="vertical-align: middle;" type="primary">搜索</el-button>
							<el-button @click="exportExcel" style="vertical-align: middle;" type="warning">导出</el-button>
						</div>
					</div>
					<div class="top-select" style="margin-top: 30px;display: flex;flex-direction: row;">
						<div style="display: flex;flex-direction: column;">
							<span class="radio-title">所属地区：</span>
							<span class="radio-title" style="margin-top: 50px;">商店总数：</span>
							<span class="radio-title" style="text-align: center;">{{ totalStore }}</span>
						</div>
						<div class="area">
							<div class="radio-button-group">
								<label v-for="(province, index) in provinces" :key="province.Id" style="display: inline;">
									<input name="provinces" type="radio" :value="province.Name" :checked="province.checked" />
									<span @click="provinceRadioClick(province)">{{ province.Name }}</span>
								</label>
							</div>
							<div class="radio-button-group">
								<label v-for="(city, index) in cities" :key="city.Id" style="display: inline;">
									<input name="citys" type="radio" :value="city.Name" :checked="city.checked" />
									<span @click="cityRadioClick(city)">{{ city.Name }}</span>
								</label>
							</div>
							<div class="radio-button-group">
								<label v-for="(town, index) in towns" :key="town.Id" style="display: inline;">
									<input name="towns" type="radio" :value="town.Name" :checked="town.checked" />
									<span @click="townRadioClick(town)">{{ town.Name }}</span>
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="box-content" style="margin-top: 20px;">
					<el-table :data="tDatas" style="width: 100%;" row-key="Id" :header-cell-style="{ 'background-color': '#EEEEEE' }">
						<el-table-column prop="Id" label="排行"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="StoreName" label="店铺名称"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="StoreActualUrl" label="地址"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="Phone" label="电话"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="AverageConsumption" label="人均消费"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="Data1" label="精选套餐数量"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="CreateTime" label="创立时间"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" prop="Description" label="商户介绍"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="店铺链接">
							<template slot-scope="scope">
								<a :href="scope.row.StoreUrl" target="_blank" style="text-decoration:none;">点评链接</a>
							</template>
						</el-table-column>
						<el-table-column prop="EvalutionCount" label="总评论数"></el-table-column>
						<el-table-column prop="StoreGrade" label="商家星级评分"></el-table-column>
						SloganStore
						<el-table-column label="是否联系">
							<template slot-scope="scope">
								<el-tag type="info" @click="updateInfoId(scope.row)">{{ scope.row.UpdateInfoId ? '否' : '是' }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="是否广告商家">
							<template slot-scope="scope">
								<el-tag>{{ scope.row.SloganStore ? '是' : '否' }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="分析">
							<template slot-scope="scope">
								<el-button @click="goCharts(scope.row)" size="mini" round>分析</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[5, 10, 20]"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalPage"
						style="margin-top: 20px;"
					></el-pagination>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="js">
import { getDate, getNow } from '../utils/times.js';
export default {
	data() {
		return {
			mselect: '日榜',
			value: '',
			options: [],
			tDatas: [],
			datas: [],
			nowTime: '',
			currentPage: 1,
			pageSize: 5,
			totalPage: 0,
			totalStore: 0,
			provinces: [{ Id: 0, Name: '不限', checked: true }],
			curProvinceId: 0,
			curProvinceName: '',
			cities: [{ Id: 0, Name: '不限', Province: null, Towns: null, Url: '', checked: true }],
			curCityId: 0,
			curCityName: '',
			towns: [{ Id: 0, City: null, Name: '不限', Url: '', Datas: null, checked: true }],
			curTownId: 0,
			curTownName: '',
			loading: false
		};
	},
	methods: {
		getDatas(datas) {
			if (!datas || !Array.isArray(datas)) {
				return [];
			}
			for (var i = 0; i < datas.length; i++) {
				datas[i].checked = false;
			}
			return datas;
		},
		async getProvinces() {
			const res = await this.$https.postJson('GetProvince');
			let provinces = this.getDatas(res.data.Data);
			let province = { Id: 0, Name: '不限', checked: true };
			provinces.unshift(province);
			this.provinces = provinces;
		},
		async getCities(id) {
			const res = await this.$https.postXform('GetCities?provinceId=' + id);
			let cities = this.getDatas(res.data.Data);
			let city = { Id: 0, Name: '不限', Province: null, Towns: null, Url: '', checked: true };
			cities.unshift(city);
			this.cities = cities;
			this.towns = [{ Id: 0, City: null, Name: '不限', Url: '', Datas: null, checked: true }];
			this.datas = [];
			this.tDatas = [];
		},
		async getTowns(provinceId, cityId) {
			const res = await this.$https.postXform('GetTowns?provinceId=' + provinceId + '&cityId=' + cityId);
			let towns = this.getDatas(res.data.Data);
			let town = { Id: 0, City: null, Name: '不限', Url: '', Datas: null, checked: true };
			towns.unshift(town);
			this.towns = towns;
			this.datas = [];
			this.tDatas = [];
		},
		async searchData() {
			this.loading = true;
			if (this.curProvinceId && this.curCityId === 0 && this.curTownId === 0) {
				const res = await this.$https.postXform('GetProvinceDatas?provinceId=' + this.curProvinceId);
				this.datas = res.data.Data;
				this.totalPage = res.data.Data.length;
				this.totalStore = this.datas.length;
				this.pagination();
				this.tDatas = this.getTDatas(this.currentPage, this.pageSize);
			}
			if (this.curProvinceId && this.curCityId && this.curTownId === 0) {
				const res = await this.$https.postXform('GetCityDatas?provinceId=' + this.curProvinceId + '&cityId=' + this.curCityId);
				this.datas = res.data.Data;
				this.totalPage = res.data.Data.length;
				this.totalStore = this.datas.length;
				this.pagination();
				this.tDatas = this.getTDatas(this.currentPage, this.pageSize);
			}
			if (this.curProvinceId && this.curCityId && this.curTownId) {
				const res = await this.$https.postXform('GetDatas?provinceId=' + this.curProvinceId + '&cityId=' + this.curCityId + '&townId=' + this.curTownId);
				this.datas = res.data.Data;
				this.totalPage = res.data.Data.length;
				this.totalStore = this.datas.length;
				this.pagination();
				this.tDatas = this.getTDatas(this.currentPage, this.pageSize);
			}
			this.loading = false;
		},
		pagination() {
			for (var i = 0; i < this.datas.length; i++) {
				const province = this.curProvinceName;
				const city = this.curCityName;
				const town = this.curTownName;
				this.datas[i].Province = province;
				this.datas[i].City = city;
				this.datas[i].Town = town;
				if (this.datas[i].StoreUrl) {
					this.datas[i].StoreUrl = 'https://www.dianping.com' + this.datas[i].StoreUrl;
				}
			}
		},
		provinceRadioClick(item) {
			if (item && item.Id != null) {
				this.curProvinceId = item.Id;
				this.curProvinceName = item.Name;
				this.getCities(item.Id);
			}
		},
		cityRadioClick(item) {
			if (item && item.Id != null) {
				this.curCityId = item.Id;
				this.curCityName = item.Name;
				this.getTowns(this.curProvinceId, this.curCityId);
			}
		},
		townRadioClick(item) {
			if (item && item.Id != null) {
				this.curTownId = item.Id;
				this.curTownName = item.Name;
			}
		},
		getTDatas(currentPage, pageSize) {
			if (this.datas.length <= currentPage) {
				return [];
			}
			let startPage = (currentPage - 1) * pageSize;
			let endPage = currentPage * pageSize;
			if (this.datas.length > currentPage && this.datas.length < currentPage + pageSize - 1) {
				return this.datas.slice(startPage, this.datas.length);
			}
			return this.datas.slice(startPage, endPage);
		},
		getOneMonth() {
			for (var i = 0; i < 30; i++) {
				let date = getDate(-i);
				let option = { label: date, value: date };
				this.options.push(option);
			}
		},
		handleSizeChange(val) {
			//console.log(`每页 ${val} 条`);
			this.pageSize = val;
			this.tDatas = this.getTDatas(this.currentPage, this.pageSize);
		},
		handleCurrentChange(val) {
			//console.log(`当前页: ${val}`);
			this.currentPage = val;
			this.tDatas = this.getTDatas(this.currentPage, this.pageSize);
		},
		//导出excel的方法
		exportExcel() {
			if (!this.datas || this.datas.length < 1) {
				this.$msg.error('请选择数据！');
				return;
			}
			require.ensure([], () => {
				const { export_json_to_excel } = require('../excel/Export2Excel');
				const headers = ['排行', '省', '市', '县', '店铺名称', '地址', '电话', '人均消费', '精选套餐数量', '创立时间', '商户介绍', '店铺链接', '总评论数', '商家星级评分', '是否广告商家'];
				const filters = [
					'Id',
					'Province',
					'City',
					'Town',
					'StoreName',
					'StoreActualUrl',
					'Phone',
					'AverageConsumption',
					'Data1',
					'CreateTime',
					'Description',
					'StoreUrl',
					'EvalutionCount',
					'StoreGrade',
					'SloganStore'
				];
				const list = this.datas;
				const data = this.formatJson(filters, list);
				export_json_to_excel(headers, data, '数据' + getDate(0));
			});
		},
		formatJson(filters, jsonData) {
			return jsonData.map(v => filters.map(j => v[j]));
		},
		goCharts(row) {
			this.$router.push({ path: "/chart", query: row });
		},
		async updateInfoId(row) {
			const res = await this.$https.postXform('UpdateDataInfo?DataId=' + row.Id);
			if (res.data.Message) {
				this.$msg(res.data.Message);
			}
		}
	},
	created() {
		this.$nextTick(function() {
			this.getOneMonth();
			this.nowTime = getNow();
			this.getProvinces();
		});
	},
	activated() {
		let that = this;
		that.$nextTick(function() {
			that.nowTime = getNow();
			that.getProvinces();
		});
	}
};
</script>

<style scoped="scoped">
.home {
	width: 100%;
	height: calc(100vh - 60px);
	display: inline-block;
}

.box-card {
	margin: 10px;
}

.radio-title {
	display: block;
	vertical-align: middle;
	margin-top: 8px;
	white-space: nowrap;
	font-size: 14px;
}

.radio-button-group {
	display: block;
	vertical-align: middle;
}

.radio-button-group input {
	display: none;
}

.radio-button-group input + span {
	display: inline-block;
	width: 75px;
	padding: 5px 5px;
	border-radius: 20px;
	background-color: #ffffff;
	text-align: center;
	margin-top: 5px;
	margin-right: 5px;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.radio-button-group input:checked + span {
	color: white;
	background-color: #fec418;
}
</style>
